import BaseChart from "@/components/Chart/BaseChart.vue";
import * as echarts from "echarts";
export default defineComponent({
	props: {
		dashboardData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	setup(props) {
		return () => {
			return (
				<div class="w-full left-ranking item-container">
					<div class="title">
						<text class="text">本月用电排行</text>
					</div>
					<div class="body">
						<TrendChart dataList={props.dashboardData.ranking} />
					</div>
				</div>
			);
		};
	}
});
const TrendChart = defineComponent({
	props: {
		dataList: {
			type: Array
		}
	},
	setup() {
		const trendChartOpts = reactive({
			tooltip: {
				trigger: "axis",
				formatter: "{b} <br/> {a}: {c} 用电",
				axisPointer: {
					type: "shadow"
				}
			} as any,
			toolbox: { show: false },
			legend: { show: false },
			xAxis: {
				splitLine: { show: false },
				axisLine: { lineStyle: { color: "#7ac0c6" } },
				axisLabel: { show: false, textStyle: { color: "#7ac0c6" } },
				type: "value"
			},
			yAxis: {
				type: "category",
				data: [] as any[],
				axisTick: { show: false },
				axisLine: { show: false },
				splitLine: { show: false, lineStyle: { color: "#083f3a" } },
				axisLabel: { formatter: `{value}`, textStyle: { color: "#ccc" } }
			},
			grid: {
				left: "0%",
				right: "0%",
				bottom: "0%",
				top: "0",
				containLabel: true
			},
			series: [
				{
					type: "bar",
					barMaxWidth: "10",
					showBackground: true,
					backgroundStyle: {
						color: "#7ac0c620"
					},
					label: {
						show: true,
						align: "right",
						verticalAlign: "bottom",
						offset: [100, 7],
						formatter: "{c} kWh"
					},
					//柱状图-柱子背景(饼图需要置空，否则无法区分)
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{ offset: 0, color: "#0C75B330" },
								{ offset: 0.1, color: "#0C75B3AA" },
								{ offset: 1, color: "#14dcd7" }
							])
						},
						emphasis: {
							//鼠标移动上去高亮
							focus: "series",
							blurScope: "coordinateSystem",
							color: "#1D7BCE"
							// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							// 	{ offset: 0, color: "#4a9fea00" },
							// 	{ offset: 0.4, color: "#4a9fea70" },
							// 	{ offset: 1, color: "#4a9fea" }
							// ])
						}
					},
					markPoint: null,
					emphasis: {
						focus: "series",
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: "rgba(0, 0, 0, 0.5)"
						}
					},
					data: [] as any[]
				}
			]
		});
		const trendChart = ref();
		// watchEffect(() => {
		// 	if (props.dataList?.length) {
		// 		trendChartOpts.yAxis.data = [];
		// 		trendChartOpts.series[0].data = [];
		// 		props.dataList.reverse().forEach((item: any) => {
		// 			trendChartOpts.yAxis.data.push(item.name);
		// 			trendChartOpts.series[0].data.push(item.energy);
		// 		});
		// 		trendChart.value?.setChart(trendChartOpts);
		// 	}
		// });
		onMounted(() => {
			trendChartOpts.yAxis.data = ["生产一车间", "生产二车间", "生产三车间", "东区库房", "办公楼", "机房服务器"].reverse();
			trendChartOpts.series[0].data = ["581", "470", "468", "350", "140", "134"].reverse();
			trendChart.value?.setChart(trendChartOpts);
		});
		return () => {
			return (
				<div class="chart-container">
					<BaseChart ref={trendChart} height="95%" class="flex items-center" />
				</div>
			);
		};
	}
});
